<!--
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>空气质量展示</title>
</head>
<body>
<h2>空气质量检测信息库</h2>
<div>


    <form action="findall" method="post">
        按区域查询
        <select name="district_id">
            <option th:value="0" name="district_id"> 请选择</option>
            <option th:value="1" name="district_id"> 东城区</option>
            <option th:value="2" name="district_id"> 西城区</option>
            <option th:value="3" name="district_id"> 海淀区</option>
            <option th:value="4" name="district_id"> 丰台区</option>
            <option th:value="5" name="district_id"> 房山区</option>
            <option th:value="6" name="district_id"> 昌平区</option>
            <option th:value="7" name="district_id"> 通州区</option>
        </select>
        <input type="submit" value="查找">
    </form>
    <a href="jumpadd">添加空气质量信息</a><br>
    <a href="logout">退出</a>
</div>
<div>
    <table border="1px">
        <tr>
            <td>序号</td>
            <td>区域</td>
            <td>检测时间</td>
            <td>PM10数据</td>
            <td>PM25数据</td>
            <td>监测站</td>
            <td>空气质量</td>
        </tr>
        <tr th:each="air:${list}">
            <td th:text="${air.id}"></td>
            <td>
                <a th:href="@{'selectbydis?id='+${air.id}}">
                    <i th:if="${air.district_id eq 1}"> 东城区</i>
                    <i th:if="${air.district_id eq 2}"> 西城区</i>
                    <i th:if="${air.district_id eq 3}"> 海淀区</i>
                    <i th:if="${air.district_id eq 4}"> 丰台区</i>
                    <i th:if="${air.district_id eq 5}"> 房山区</i>
                    <i th:if="${air.district_id eq 6}"> 昌平区</i>
                    <i th:if="${air.district_id eq 7}"> 通州区</i>

                </a>
            </td>
            <td th:text="${air.monitor_time}"></td>
            <td th:text="${air.pm10}"></td>
            <td th:text="${air.pm25}"></td>
            <td th:text="${air.monitoring_station}"></td>
            <td>
                <i th:if="${air.pm25 gt 50}">差</i>
                <i th:if="${air.pm25 gt 25} and ${air.pm25 lt 50}">良</i>
                <i th:if="${air.pm25 lt 25}">优</i>
            </td>
        </tr>
    </table>
    <a th:href="@{'findall?pageNum='+${1}}"> 首页 </a>
    <th th:each="pg:${pageInfo.navigatepageNums}">
        <a th:href="@{'findall?pageNum='+${pg}}">
            <i th:text="${pg}"></i>
        </a>
    </th>
    <a th:href="@{'findall?pageNum='+${pageInfo.getPages()}}"> 尾页 </a><br>
    当前页：
    <th th:text="${pageInfo.getPageNum()}"/>
    每页条数：
    <th th:text="${pageInfo.getSize()}"/>
    总条数：
    <th th:text="${pageInfo.getTotal()}"/>
    总页数：
    <th th:text="${pageInfo.getPages()}"/>


</div>
</body>
</html>
-->



<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>空气质量展示</title>
    <style>
        body{
            margin: 0px;
            background-color: aquamarine;
            background-size: cover;
        }
        #div1{
            height: 50px;
            line-height: 50px;
            font-size: 30px;
            font-weight: 600;
            color: white;
            background-color: darkcyan;
            /* text-indent: 50px; */
            padding-left: 40px;
        }
        #div2{
            height: 400px;
            width: 600px;
            background-color: rgba(0,0,0,0.2);
            margin: 80px auto;
            padding-top: 20px;
            padding-left: 80px;

        }

        #div2 img{
            height: 30px;
            width: 30px;
            vertical-align: middle;
        }
        #div2 input{
            height: 30px;
            width: 249px;
            padding-left: 20px;
            font-size: 20px;
            margin: 20px;
        }
        button{
            width: 100px;
            height: 30px;
            background-color: #FFFFFF;
            border: 0px;
            font-size: 20px;
            text-align: center;
        }


    </style>
</head>
<body>
<!-- 第一块区域 -->
<div id="div1">
    空气质量查询系统
</div>
<div id="div2">
    <div>
        <form action="findall" method="post">
            按区域查询
            <select name="district_id">
                <option th:value="0" name="district_id"> 请选择</option>
                <option th:value="1" name="district_id"> 东城区</option>
                <option th:value="2" name="district_id"> 西城区</option>
                <option th:value="3" name="district_id"> 海淀区</option>
                <option th:value="4" name="district_id"> 丰台区</option>
                <option th:value="5" name="district_id"> 房山区</option>
                <option th:value="6" name="district_id"> 昌平区</option>
                <option th:value="7" name="district_id"> 通州区</option>
            </select>
            <input type="submit" value="查找">
        </form>

        <a href="jumpadd" style="padding-left: 200px">添加空气质量信息</a><br>
        <a href="selectAll">账号管理</a>
        <a href="logout" style="padding-left: 400px">退出</a>
    </div>
    <div>
        <table border="1px">
            <tr>
                <td>序号</td>
                <td>区域</td>
                <td>检测时间</td>
                <td>PM10数据</td>
                <td>PM25数据</td>
                <td>监测站</td>
                <td>空气质量</td>
            </tr>
            <tr th:each="air:${list}">
                <td th:text="${air.id}"></td>
                <td>
                    <a th:href="@{'selectbydis?id='+${air.id}}">
                        <i th:if="${air.district_id eq 1}"> 东城区</i>
                        <i th:if="${air.district_id eq 2}"> 西城区</i>
                        <i th:if="${air.district_id eq 3}"> 海淀区</i>
                        <i th:if="${air.district_id eq 4}"> 丰台区</i>
                        <i th:if="${air.district_id eq 5}"> 房山区</i>
                        <i th:if="${air.district_id eq 6}"> 昌平区</i>
                        <i th:if="${air.district_id eq 7}"> 通州区</i>

                    </a>
                </td>
                <td th:text="${air.monitor_time}"></td>
                <td th:text="${air.pm10}"></td>
                <td th:text="${air.pm25}"></td>
                <td th:text="${air.monitoring_station}"></td>
                <td>
                    <i th:if="${air.pm25 gt 50}">差</i>
                    <i th:if="${air.pm25 gt 25} and ${air.pm25 lt 50}">良</i>
                    <i th:if="${air.pm25 lt 25}">优</i>
                </td>
            </tr>
        </table>
        <div style="padding-left: 200px">
        <a th:href="@{'findall?pageNum='+${1}}"> 首页 </a>
        <th th:each="pg:${pageInfo.navigatepageNums}">
            <a th:href="@{'findall?pageNum='+${pg}}">
                <i th:text="${pg}"></i>
            </a>
        </th>
        <a th:href="@{'findall?pageNum='+${pageInfo.getPages()}}"> 尾页 </a><br>
        </div>
        <div style="padding-left: 80px">
        当前页：
        <th th:text="${pageInfo.getPageNum()}"/>
        每页条数：
        <th th:text="${pageInfo.getSize()}"/>
        总条数：
        <th th:text="${pageInfo.getTotal()}"/>
        总页数：
        <th th:text="${pageInfo.getPages()}"/>
        </div>

    </div>
</div>

</body>
</html>
